%% Vue 项目生成流程 - Mermaid 图表集合
%% 注意：每个图表需要单独使用，不能在一个文件中包含多个图表定义
%% 使用方法：复制对应的图表代码到支持 Mermaid 的编辑器中

%% ============================================
%% 图表 1: 主流程图 (Flowchart)
%% ============================================
flowchart TD
    A[前端发起请求<br/>AppChatPage.vue<br/>EventSource/SSE] --> B[Controller 层<br/>AppController.chatToGenCode<br/>转换为 ServerSentEvent]
    B --> C[Service 层<br/>AppServiceImpl.chatToGenCode<br/>参数校验/权限校验/保存用户消息]
    C --> D[Facade 层<br/>AiCodeGeneratorFacade<br/>获取 AI Service 实例]
    D --> E[AI Service 工厂<br/>AiCodeGeneratorServiceFactory<br/>创建对话记忆/配置模型+工具]
    E --> F[AI Service 接口<br/>AiCodeGeneratorService<br/>加载系统提示词]
    F --> G[AI 模型生成<br/>DeepSeek Reasoning<br/>流式生成代码]
    G --> H[工具调用<br/>FileWriteTool 等<br/>执行文件操作]
    H --> I[TokenStream 转换<br/>processTokenStream<br/>转换为 Flux String]
    I --> J[流处理器<br/>JsonMessageStreamHandler<br/>解析 JSON/格式化]
    J --> K[前端实时显示<br/>SSE 流式返回]
    J --> L[Vue 项目构建<br/>VueProjectBuilder<br/>npm install/build]
    
    style A fill:#e1f5ff
    style G fill:#fff4e1
    style H fill:#ffe1f5
    style K fill:#e1ffe1
    style L fill:#f5e1ff
